<template>
    <div>
        <div class="toast" v-show="isShow">
            {{message}}
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isShow:false,
                message:''
            }
        },
        methods: {
            show(message,duration=1500){
                this.isShow=true;
                this.message=message;
                setTimeout(()=>{
                    this.isShow=false;
                    this.message=''
                },duration)
            }
        },
    }
</script>

<style lang="scss" scoped>
.toast{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 8px 20px;
    background-color: rgba(89,89,89,.3);
    color: #fff;
    z-index: 999;
}
</style>